HTML5+javascriptOO编程思想的写法实现键盘游戏

最新推荐文章于 2019-05-16 14:11:20 发布

李永岩

最新推荐文章于 2019-05-16 14:11:20 发布

阅读量845

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/jackliyongyan/article/details/10858559

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta Charset="GBK"/>
<title></title>
</head>
<body οnkeydοwn="getCommand(event)">
<h2>HTML5 键盘游戏</h2>
<canvas id="keyGameMap" width="700px" height="450px" style="border:1px solid black;background-color:green" ></canvas>
<div>
<input type="button" value="strat" οnclick="Run()"/>
<span>得分：</span>
<input type="text" id="getScore"/>
</div>
<script type="text/javascript">
/*这个游戏采用javascript的OO编程思想+HTML5实现*/
//得到画布的对象
var canvas=document.getElementById("keyGameMap");
//得到绘制的上下文
var context=canvas.getContext("2d");
//alert("context:"+context);
//定义一个字符类
//x代表字符的横坐标，y表示字符的纵坐标charType表示字符的类型draw代表是否绘制
function Char(x,y,charType){
this.x=x;
this.y=y;
this.draw=true;
this.charType=charType;
}
//定义一个字母类型的类继承了字符类
function Letter(x,y,charType){
//通过对象冒充，达到继承
this.letter=Char;
this.letter(x,y,charType);
//alert("this.charType"+this.charType+"this.x"+this.x+"this.y"+this.y);
//绘制字母
this.drawLetter=function (letter){
if(letter.draw){
//context.clearRect(0,0,700,450);
context.font = "20pt Calibri";
context.fillStyle = "yellow";
//context.textAlign = "center";
context.textBaseline = "middle";
context.fillText(letter.charType, letter.x, letter.y);
}
}
//字母移动
this.moveDown=function (){
//alert("this.moveDown");
this.y+=2;
//alert("this.y:"+this.y);
}
//字母消失
this.disappear=function (){
this.draw=false;
}
}
//定义一个得分类
function Score(){
var oSocre=document.getElementById("getScore");
var score=0;
function init(){
oSocre.value=0;
//alert(oSocre.value);
}
init();
this.addSocre=function(){
score+=10;
oSocre.value=score;
}
}
//定义一个游戏类
function Game(){
var socre=new Score(1);
//定义一个字母数组
var charArray=new Array();
//初始化游戏
function init(){
//alert("init()");
//初始化new出10个字母
for(var i=0;i<10;i++){
var aChar=RandomChar();
var letters=new Letter((i+1)*50,30,aChar);
charArray[i]=letters;
}
}
init();
//随机字母
function RandomChar(){
var arrChar=new Array("A","B","C","D","E","F","G","H","I");
return arrChar[Math.round(Math.random()*arrChar.length)];
}
//flashLetterMap函数，用于定时刷新游戏的画布地图区，把要在游戏画布区出现的字母不停地刷新绘出不同的位置
//alert(charArray);
function flashLetterMap(){
context.clearRect(0,0,700,450);
for(var i=0;i<charArray.length;i++){
charArray[i].drawLetter(charArray[i]);
//alert(charArray[i])
}
}
function getKeyDown(event){
//alert("getKeyDown(event)"+event.which);
var keyChar=String.fromCharCode(event.which);
//alert("keyChar"+keyChar);
for(var i=0;i<charArray.length;i++){
if(charArray[i].charType==keyChar){
charArray[i].disappear();
socre.addSocre();
}
}
}
this.srtat=function (){
//挂起键盘监听
document.οnkeydοwn=getKeyDown;
//启动一个定时器
window.setInterval(function (){
flashLetterMap();
//letters.moveDown();
for(var i=0;i<charArray.length;i++){
charArray[i].moveDown();
}
},50);
}
}
function Run(){
var game=new Game();
game.srtat();

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