zoukankan      html  css  js  c++  java
  • 键盘游戏之canvas--用OO方式写

    虽然写的不是很好,但 解释权以及版权仍然归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>


  • 相关阅读:
    解决IE6浏览器下position:fixed固定定位问题
    CSS中overflow:hidden在ie6、ie7无效不能隐藏解决办法
    liunx 中删除export设置的环境变量
    文件操作
    集合操作
    三级菜单
    字典操作
    字符串操作
    购物车程序
    列表操作
  • 原文地址:https://www.cnblogs.com/pangblog/p/3310481.html
Copyright © 2011-2022 走看看