您的位置：首页 > 移动开发 > 微信开发

JS微信打飞机游戏（一）

2013-08-15 22:10 417 查看

模拟微信打飞机游戏,JavaScript+HTML5+css实现,随后版本可能移植到Android和IOS.

首个版本里，仅实现按住键盘移动飞机移动. 不必解释过多,代码里面有注释.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hit Flyer</title>

<!--
Email: samwang822@gmail.com
-->
<!--
I perfect do not use jQuery.
As jQuery is so famous,some learners learn jQuery,then JavaScript,and me too.
I am here try to show you that JavaScript can do what jQuery does in a easy way.
-->
<!--
At the this Version,
the player can move by click the keyboard.
-->

<style type="text/css">
canvas#mycanvas {
/*let canvas be center */
position: absolute;
margin: auto auto;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
background-color: black;
border: 1px solid #d3d3d3;
}
</style>
</head>
<body>

<!-- do not know why set the "width" and "height" as a style,
not as attribute,will cause draw rectangle'width wrong
-->
<canvas id="mycanvas" width="400" height="600">
</canvas>

<script>

/**
* put script at the bottom of body document.
* or you should add code as
* <code>
*	window.addEventListener("load",function(){
*	 //todo put your code
*	});
*
*</code>
*/
var mycanvas=document.getElementById("mycanvas");
var ctx=mycanvas.getContext("2d");

var canWidth=mycanvas.width;
var canHeight=mycanvas.height;

/*
* We will only have one instance player,so create a player object directly.
*
*/
var player={
width:20,
height:20,
step:5,//when press key,the player will move.
//here just use Rectangle as Plane,if you have Plane image...
// then maybe color properties can be removed.
color:"red",
position:{
x:0,
y:0
}
};

/*
* The player display method, and it will show at (x,y).
*/
player.display=function(x,y){
this.position.x=x;
this.position.y=y;
//save the Context status. then restore it,as "ctx.restore" shows
ctx.save();
ctx.fillStyle=this.color;
//here just use Rectangle as Plane,if you have Plane image...
ctx.fillRect(x,y,this.width,this.height);
ctx.restore();
}
//The player move method.
player.move=function(dir){
//Firstly remove it.Then show the new one.
this.miss();
switch(dir){
case "up":
this.position.y-=this.step;
break;
case "down":
this.position.y+=this.step;
break;
case "left":
this.position.x-=this.step;
break;
case "right":
this.position.x+=this.step;
break;

}
this.display(this.position.x,this.position.y);
}
//The player remove
player.miss=function(){
ctx.clearRect(this.position.x,this.position.y,this.width,this.height);
}

//display player
player.display((canWidth-player.width)/2,canHeight-player.height);

//add window keypress event listener
//keypress event will trigger the function every 33 millisecond.
//I do not know, whether it is 33 millisecond in other browser and Java Swing.
window.addEventListener("keypress",function(e){
var keyCode=e.keyCode;
if(keyCode===119){
//w
dir="up";
}else if(keyCode===100){
//d
dir="right";
}else if(keyCode===115){
//s
dir="down";
}else if(keyCode===97){
//a
dir="left";

}
//pass the dir to move the player.
player.move(dir);

});

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： JavaScript 游戏微信打飞机 HTML5

相关文章推荐

新的分享

章节导航