<!DOCTYPE html>

 <html lang="en">

 <head>

 <meta charset="UTF-8">

 <title>猜数</title>

 </head>

 <body>

 <canvas id="box" width="500" height="300"></canvas>

 <form>

 <input type="text" id="guessValue" placeholder="port Canvas Image">

 <button id="createImageData">猜猜看?!</button>

 </form>

 <script>

 var guesses = 0;

 var message = "Guess the letter from a(lower) to Z(higher)";

 var letters = ["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"];

 var today = new Date();

 var letterToGuess = '';

 var higherOrLower='';

 var letterGuessed;

 var gameOver = false;

 function initGame() {

     var letterIndex = Math.floor(Math.random() * letters.length);

     letterToGuess = letters[letterIndex];

     guess = 0;

     letterGuessed = [];

     gameOver = false;

     window.addEventListener("keydown", eventKeyPressed, true);

     drawScreen();

     var formElement = document.querySelector("#createImageData");

     formElement.addEventListener("click",createImageDataPressed,false);

 }

 function eventKeyPressed(e){

     if(!gameOver) {

         var letterPressed = String.fromCharCode(e.keyCode);

         letterPressed = letterPressed.toLowerCase();

         guesses++;

         letterGuessed.push(letterPressed);

         if (letterPressed == letterToGuess) {

             gameOver = true;

         } else {

             letterIndex = letters.indexOf(letterToGuess);

             guessIndex = letters.indexOf(letterPressed);

             console.log(guessIndex);

             if (guessIndex < 0) {

                 higherOrLower = "That is not a letter!"

             } else if (guessIndex > letterIndex) {

                 higherOrLower = "Lower";

             } else {

                 higherOrLower = "higher";

             }

         }

          drawScreen();

     }

 }

 var canvas = document.querySelector("#box");

 var ctx = canvas.getContext("2d");

 function drawScreen(){

     //背景

     ctx.fillStyle = "#ffffaa";

     ctx.fillRect(0,0,500,300);

     //边框

     ctx.strokeStyle = "#000000";

     ctx.strokeRect(5,5,490,290);

     ctx.textBaseline = "top";

     //日期

     ctx.fillStyle = "#000000";

     ctx.font = "10px Sans-Serif";

     ctx.fillText(today,150,10);

     //消息

     ctx.fillStyle = "#ff0000";

     ctx.font = "14px Sans-serif";

     ctx.fillText(message,125,30);

     //猜的次数

     ctx.fillStyle = "#109910";

     ctx.font = "16px Sans-serif";

     ctx.fillText("guess: "+guesses+"次！",215,50);

     //显示higher或lower

     ctx.fillStyle = "#000";

     ctx.font = "16px Sans-Serif";

     ctx.fillText("Higher or Lower: "+higherOrLower,150,125);

     //猜过的字母

     ctx.fillStyle = "#ff0000";

     ctx.font = "16px Sans-Serif";

     ctx.fillText("Letters Guessed: "+letterGuessed.toString(),10,260);

     if(gameOver){

         ctx.fillStyle = "#ff0000";

         ctx.font = "40px _sans-serif";

         ctx.fillText("You got it!",150,180);

     }

 }

 function createImageDataPressed(e){

 window.open(canvas.toDataURL(),"canvasImage","left=0,top=0,width="+canvas.width +",height="+canvas.height +",toolbar=0,resizeable=0");

 }

 initGame();

 </script>

 </body>

 </html>

canvas猜数游戏的更多相关文章

  1. 【BZOJ 1594】 [Usaco2008 Jan]猜数游戏 (二分+并查集)

    1594: [Usaco2008 Jan]猜数游戏 Description 为了提高自己低得可怜的智商,奶牛们设计了一个新的猜数游戏,来锻炼她们的逻辑推理能力. 游戏开始前,一头指定的奶牛会在牛棚后面 ...

  2. usaco 猜数游戏

    Description 为了提高智商,锻炼思维能力,奶牛设计了一个猜数游戏.游戏开始前,贝西会在牛棚后面摆上N个数字.所有数字排成一条直线,按次序从1到N编号.每个数字在1到10^9之间,没有两个数字 ...

  3. （一）Python之猜数游戏

    猜数游戏由简如深的编码学习过程: 3次机会: print('------------------我爱鱼C工作室------------------')count=0while count < 3 ...

  4. 猜数游戏-flag的运用

    package my;import java.util.Scanner;public class MyJava {        public static void main(String[] ar ...

  5. Java课程设计——猜数游戏（201521123111 陈伟泽）

    Java课程设计--猜数游戏(201521123111 陈伟泽) 1.团队课程设计博客链接 博客作业--猜数游戏 2.个人负责模块或任务说明 Answer:一些基础界面的构造,排行榜的构造,用文件录入 ...

  6. JAVA课程设计 猜数游戏 团队

    团队名称,成员介绍 名称: 猜数游戏 成员: 网络1514 201521123086 周颖强 网络1514 201521123087蒋勃超 项目git地址 git.oschina.net/jbc113 ...

  7. BZOJ 2222: [Cqoi2006]猜数游戏【神奇的做法，傻逼题，猜结论】

    2222: [Cqoi2006]猜数游戏 Time Limit: 20 Sec  Memory Limit: 259 MBSubmit: 604  Solved: 260[Submit][Status ...

  8. 从scratch到python——猜数游戏

    ` 之前讲解了从scratch到python,基于python turtle库的实现,讲解了用scratch和python turtle绘图的实现,以及让小猫动起来和当角色被单击的例子. 本节课讲继续 ...

  9. VBS猜数游戏

    VBS 猜数游戏 2018-11-09  21:19:11 by xutao msgbox "The Swami" ,,"Game" msgbox " ...

随机推荐

  1. JUnit4简易教程

    1.下载JUnit4的jar包,在项目上右键选properties->Java Build Path ->Libraries->Add library添加刚才的jar包 2.在项目中 ...

  2. 企业搜索引擎开发之连接器connector（二十）

    连接器里面衔接数据源与数据推送对象的是QueryTraverser类对象,该类实现了Traverser接口 /** * Interface presented by a Traverser. Used ...

  3. handsontable-cell type

    在单元格中呈现自定义的元素:不能使用html元素 var data = [ { title: "<a href='http://www.amazon.com/Professional- ...

  4. task4:结对项目-词频统计

    结对人:周楠 思路:利用TreeMap实现key字典序,然后输出到LinkedList,然后用Comparator,实现字典值从大到小排序,但是key实现值相同的key字典序的想出的实现方法,但是一直 ...

  5. 开通博客暨注册github事件

    (1) 姓      名:丁新宇 学      号:1413042054 班      级:网工142 兴趣爱好:听歌.看书.编代码. (2) GitHub注册流程: 1,百度搜索GitHub,进入官 ...

  6. 强制TFS用户与计算机（域）用户同步

    默认情况下,添加到域AD组中的账户不会立刻同步到TFS中. TFS每小时与域控制器同步一次,将计算机安全组中的账户添加到TFS中. 但是可以通过下面几种方式强制TFS立刻同步域中的账户: 1. 在TF ...

  7. aspnetPage分页控件

    项目里面有一个分页,刚好知道了aspnetPage分页控件,现在就把实现步骤和代码贴出来分享一下,如有错误欢迎指正. http://www.webdiyer.com  该控件原网址.里面文档 1.首先 ...

  8. [Oracle]Oracle数据库CPU利用率很高解决方案

    Oracle数据库经常会遇到CPU利用率很高的情况,这种时候大都是数据库中存在着严重性能低下的SQL语句,这种SQL语句大大的消耗了CPU资源,导致整个系统性能低下.当然,引起严重性能低下的SQL语句 ...

  9. “全栈2019”Java异常第二十一章：finally不被执行的情况

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异 ...

  10. SQL Server 根据树状结构表生成以/号分割的路由字符串

    很多情况下,我们有必要把树形结构进行数据梳理.比如,要方便的过滤出一个父节点下的所有子节点等等... 这个时候,我们可以生成一个路径表字符串,在应用时只需要对该字符串进行索引即可达成目的. 目标:按图 ...