js打飞机 博客分类： js js大飞机
程序员文章站
2024-03-19 13:26:58
...
<div class="iteye-blog-content-contain" style="font-size: 14px">
<!DOCTYPE html>
<html>
<head>
</head>
<body style="background-image: url("./bg.jpg");background-repeat:repeat;" >
<canvas id="gameArea" width="500" height="600" style="border:1px solid #c3c3c3"></canvas>
</body>
</html>
<script>
var canvas=document.getElementById('gameArea');
var ctx=canvas.getContext('2d');
var locate_x=100;
var locate_y=300;
document.onkeydown=function(e){ //键盘按下事件绑定
var e=window.event||e;
switch(e.keyCode){
case 37: //左
{
ctx.rect(locate_x,locate_y,100,100);
ctx.fillStyle="white";
ctx.fill();
locate_x=locate_x-10;
drawImage("./p2.jpg",100,100,locate_x,locate_y);
break;
}
case 38: //上
{
ctx.rect(locate_x,locate_y,100,100);
ctx.fillStyle="white";
ctx.fill();
locate_y=locate_y-10;
drawImage("./p2.jpg",100,100,locate_x,locate_y);
break;
}
case 39: //右
{
ctx.rect(locate_x,locate_y,100,100);
ctx.fillStyle="white";
ctx.fill();
locate_x=locate_x+10;
drawImage("./p2.jpg",100,100,locate_x,locate_y);
break;
}
case 40: //下
{
ctx.rect(locate_x,locate_y,100,100);
ctx.fillStyle="white";
ctx.fill();
locate_y=locate_y+10;
drawImage("./p2.jpg",100,100,locate_x,locate_y);
break;
}
}
}
// ctx.fillStyle='#FF0000';
// ctx.fillRect(0,0,80,100);
// ctx.font="20px Georgia";
// ctx.fillText("Hello World!",10,50);
drawImage("./p2.jpg",100,100,locate_x,locate_y);
drawImage("./d.jpg",100,100,60,10);
drawImage("./d.jpg",100,100,100,10);
drawImage("./d.jpg",100,100,140,10);
drawImage("./d.jpg",100,100,180,10);
drawImage("./d.jpg",100,100,220,10);
ctx.font="italic small-caps bold 30px arial";
ctx.fillText("打灰机!",100,200);
drawImage("./p2.jpg",100,100,60,170);
drawImage("./p2.jpg",100,100,200,170);
function createImage(src,width,height){
var img=document.createElement("image");
img.getAttribute.src=src;
img.width=width;
img.height=height;
return img;
}
function drawImage(src,width,height,x,y){
//var img=createImage(src,width.height);
var img = new Image();
img.width=width;
img.height=height;
img.onload=function(){
ctx.drawImage(img,x,y);
}
img.src=src;
}
</script>
</div>
上一篇： Solidity合约中签名验证的一点实践
推荐阅读
-
js打飞机 博客分类： js js大飞机
-
高中数学 博客分类： js 高中 抛物线 椭圆 双曲线 直线
-
JS 中的apply方法、call方法详解 博客分类： javascript
-
JS代码优化 博客分类： javascript
-
JS代码优化 博客分类： javascript
-
js对象 博客分类： 技术
-
js对象 博客分类： 技术
-
JS原生ajax 博客分类： js
-
JS中push()的作用简单说明 博客分类： 项目经验总结 JS
-
Scrapy框架结合Spynner采集需进行js,ajax动态加载的网页并提取网页信息（以采集微信公众号文章列表为例） 博客分类： Scrapy结合Spynner ScrapySpynnerwebkit