博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
键盘游戏之canvas--用OO方式写
阅读量:7237 次
发布时间:2019-06-29

本文共 3259 字,大约阅读时间需要 10 分钟。

虽然写的不是很好,但 解释权以及版权仍然归13东倍所有!
 <!DOCTYPE HTML>
<html>
<head>
<title>canvas-00</title>
<script>
window.οnlοad=function(){
//alert("coming onload");
alert("游戏说明:在键盘上输入的字符与游戏下落的字符相同时,积分板加分,积分达到一定时,提示进入下一关,若字符落到底部,即游戏结束。点击按钮开始游戏吧!");
var game=new Game();
game.start();
}
function Game(){
//alert("coming Game()");
var createChar=new Array();
//var scoreBoard=new Array();
var scoreBoard=new CreateScoreBoard();
for(var i=0;i<10;i++){
createChar[i]=new CreateChar();
//scoreBoard[i]=new CreateScoreBoard();
}
 
this.start=function(){
var time=setInterval(function(){
for(var i=0;i<10;i++){
createChar[i].clearContext();
//scoreBoard[i].clearScore();
}
for(var i=0;i<10;i++){
createChar[i].move();
createChar[i].show();
//scoreBoard[i].show();
if(createChar[i].return_y()>490){
clearInterval(time);
for(var i=0;i<10;i++){
createChar[i].clearContext();
}
alert("game over");
break;
}
}
scoreBoard.showScore();
},50);
 
document.οnkeydοwn=keydown;
var jifen=200;
var pass=2;
function keydown(e){
var real=String.fromCharCode(e.which);
//alert(real);
for(var i=0;i<10;i++){
if(real==createChar[i].returnWords()){
//alert("zhong");
//scoreBoard[i].addScores();
scoreBoard.addScores();
//alert("00");
createChar[i].returnTOP();
if(scoreBoard.returnScore()==jifen){
jifen+=200;
alert("恭喜你,点击确定进入第"+(pass++)+"关!");
for(var i=0;i<10;i++){
createChar[i].returnTOP();
createChar[i].speed();
}
}
}
}
}
}
 
}
function CreateChar(){
//alert("coming CreateChar()");
var canvas;
var context;
var char_y=50;
//规定范围内取随机数   *(上限-下限+1)+下限
var char_x;
var words=new Array("A","B","C","D","E","F","G","H","I","J","K","L","N","M","O","P","Q","R","S","T","U","V","W","Z","X","Y");
var num;
var down=1;
function initChar(){
canvas=document.getElementById("myCanvas");
//alert("canvas--"+canvas);
context=canvas.getContext("2d");
//alert("context--"+context);
context.font="20pt 黑体";
num=parseInt(Math.random()*words.length);
char_x=parseInt(Math.random()*(680-20-1)+20);
context.fillText(words[num],char_x,char_y);
}
initChar();
this.move=function(){
char_y+=down;
}
this.show=function(){
context.font="20pt 黑体";
context.fillText(words[num],char_x,char_y);
}
this.clearContext=function(){
//alert("coming clearContext()");
return context.clearRect(0,0,700,500);
}
this.returnWords=function(){
return words[num];
}
this.return_y=function(){
return char_y;
}
this.returnTOP=function(){
char_y=50;
//newChar.style.display="none";
initChar();
}
this.speed=function(){
down++;
}
}
function CreateScoreBoard(){
var canvas;
var context;
var scores=0;
function initScoreBoard(){
//alert("coming initScoreBoard()");
canvas=document.getElementById("myCanvas");
//alert("canvas--"+canvas);
context=canvas.getContext("2d");
//alert("context--"+context);
context.font="20pt 黑体";
//context.fillText("得分:0",400,100);
}
initScoreBoard();
this.showScore=function(){
//context.clearRect(0,0,700,500);
context.font="25pt 黑体";
//context.fillText("",500,30);
context.fillText("得分:"+scores,500,30);
}
this.addScores=function(){
scores+=10;
}
this.clearScore=function(){
//alert("coming clearContext()");
return context.clearRect(0,0,700,500);
}
this.returnScore=function(){
return scores;
}
}
</script>
</head>
<body>
<canvas id="myCanvas" width="700" height="500" style="border:1px solid black"></canvas>
</body>
</html>

转载地址:http://kdgfm.baihongyu.com/

你可能感兴趣的文章
线性重复动画
查看>>
炒冷饭系列:设计模式 建造者模式
查看>>
BAT解密:互联网技术发展之路(2)- 业务如何驱动技术发展
查看>>
bat脚本自动扫描制定文件夹下shp文件,并导入数据库,然后执行空间操作
查看>>
关于AsyncHttpClient的cz.msebera.android.httpclient.Header
查看>>
Codekit - 为Web前端打造的全能型神器(附推荐各种工具)
查看>>
JSP JSTL SQL标签操作数据库
查看>>
compare python use py-postgresql & direct pgbench's performance
查看>>
【hibernate框架】核心开发接口-update方法
查看>>
Android过场动画基础教程
查看>>
实现指定任意数量的方块EditText容器BlockEditTextViewGroup
查看>>
PostCSS 常用插件与语法介绍
查看>>
计算机是如何存储数据的?
查看>>
Decorator:从原理到实践,我一点都不虚~
查看>>
前端引用字体@font-face的若干优化方法
查看>>
Linux笔记---修改文件所有者、所属组
查看>>
为什么开发kedis-server
查看>>
墙裂科普:移动端适配的基础概念
查看>>
模块化TableView
查看>>
Java笔试题算法和数据库部分
查看>>