虽然写的不是很好，但 解释权以及版权仍然归13东倍所有！
 <!DOCTYPE HTML>

<html>
<head>
<title>canvas-00</title>
<script>
window.onload=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.onkeydown=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>

键盘游戏之canvas--用OO方式写的更多相关文章

  1. 用OO方式写键盘字母小游戏

    <html>  <head>   <title>0.0</title>   <script>    window.onload=functi ...

  2. HttpWeb服务器之--用OO方式写

    虽然写的不是很好,但 最终解释权以及版权归13东倍所有! package com.web; import java.io.IOException; public class Test { public ...

  3. OO方式下，ALV TREE和ALV GRID的不同之处

    作为大部分报表程序的基础,ALV GRID差不多是每个ABAP开发者必须了解和掌握的内容,因此网上也不乏相关资料,而ALV TREE的应用相对较少,中文资料也就比较少见了.实际上,ALV TREE和A ...

  4. jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){ ...

  5. JavaScript--------------------jQuery中.bind() .live() .delegate() .on()的区别 和 三种方式写光棒事件 动画

    bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){alert( ...

  6. Django类方式写view

    问题: Django官方教程中都是通过def函数方式来写view,如何通过类方式写view以及为何要通过类方式写view? 那,如何解决这个问题? 用户访问浏览器,一般两种方式,get获取网页和pos ...

  7. 使用promise方式写settimeout

    //使用promise方式写settimeout, //好处就是用于写动画的时候只需知道后一个的动画在前一个动画结束后多久执行 console.time('settimeout:');//开始计算这段 ...

  8. 代码规范(RL-TOC)用更合理的方式写 JavaScript

    代码可以改变世界 不规范代码可以毁掉世界 只有先学会写规范的代码,才可以走的更远 编程语言之间有很多编程规范都是通用: 命名 不要用语言不明的缩写,不用担心名字过长,名字一定要让别人知道确切的意思; ...

  9. 四种方式写按钮点击事件和Android 中常用的布局

    1.匿名内部类的方式 2.创建一个类实现onClickListener,实现onClick方法,设置控件点击时传一个类的对象 3.让当前类实现onClickListener,设置控件点击事件时传递一个 ...

随机推荐

  1. SGU 415. Necessary Coins ( 背包dp )

    题意大概是:给出N个硬币, 面值为a_i, 问要凑成X元哪些硬币是不可或缺的.1 ≤ N ≤ 200, 1 ≤ x ≤ 10^4 直接枚举, 然后就是01背包了. 为了不让复杂度多乘个N, 我们就从左 ...

  2. Qt 多线程与数据库操作需要注意的几点问题

    源地址:http://blog.csdn.net/goldenhawking/article/details/10811409 彻底抛弃MFC, 全面应用Qt 已经不少时间了.除了自己看书按步就班做了 ...

  3. .bat脚本将windows server 2008设置成ntp时间同步服务器

    @echo off echo autor OAK @echo off echo -------------------------------- @echo off REG ADD HKEY_LOCA ...

  4. 总线接口与计算机通信（一）I2C总线

    1.  I2C总线的基本概念    1)发送器(Transmitter):发送数据到总线的器件    2)接收器(Receiver):从总线接收数据的器件    3)主机(Master):初始化发送. ...

  5. 基于visual Studio2013解决C语言竞赛题之1037数组求列和

          题目 解决代码及点评 /* 功能:已知有三个数组A,B,C,A为5行5列的二维数组,B.C为只有5个元素的一维数组,键盘输入数据的顺序如下: 23,45,6,1,- ...

  6. Milonga_百度百科

    Milonga_百度百科     Milonga是Tango的一种.源于并盛行于阿根廷.6/8拍的舞曲.节奏为 AXX BXX CX 分别都是8分音符.由于第3组节奏音只有2个8分音符,比前2组而缺少 ...

  7. nginx+memcached+ftp上传图片+iis

    nginx+memcached+ftp上传图片+iis 自毕业以来,一直在现在公司做订餐系统的开发,那会儿没有口碑,没有饿了么,更别说美团外卖,百度外卖了...因为规模都比较小,都是一个服务器包含数据 ...

  8. Qt遍历图片文件

    原地址:http://blog.sina.com.cn/s/blog_5c70dfc80100tgff.html //实现遍历某个文件下的图片文件 //如果想遍历其余类型文件,方法也一样,只需简单修改 ...

  9. Maven+Nexus+Jenkins+Svn+Tomcat+Sonar搭建持续集成环境（二）

    上一篇随笔Maven+Nexus+Jenkins+Svn+Tomcat+Sonar搭建持续集成环境(一)介绍maven和nexus的环境搭建,以及如何使用maven和nexus统一管理库文件和版本,以 ...

  10. 基于visual Studio2013解决面试题之0506取和为m的可能组合

     题目