<!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. Cacti部署

    1>监控概述   通常运维人员在一个企业当中所需要管理一台或者多台服务器,或者甚至更多,特别是BAT公司或者门户级别的公司,一个人管理的服务器可能上百甚至上千台                  ...

  2. Android-自定义控件-继承View与ViewGroup的初步理解

    继承View需要走的流程是: 1.构造实例化, public ChildView(Context context, @Nullable AttributeSet attrs) 2.测量自身的高和宽on ...

  3. Lucene4：获取中文分词结果，根据文本计算boost

    1. 要求 环境: Lucene 4.1版本/IKAnalyzer 2012 FF版本/mmseg4j 1.9版本 实现功能: 1).给定输入文本,获取中文拆分词结果:2).给定输入文本,对该文本按一 ...

  4. Spring学习（六）——集成memcached客户端

    memcached是高性能的分布式内存缓存服务器.许多Web应用都将数据保存到RDBMS中,应用服务器从中读取数据并在浏览器中显示. 但随着数据量的增大.访问的集中,就会出现RDBMS的负担加重.数据 ...

  5. MVC页面移除HTTP Header中服务器信息

    默认情况下,每一个MVC请求的HTTP Header中都会包含着当前服务器的一些信息,出于安全还是性能还是处女座的强迫症等等,都想把这些信息移除掉,增加一些应用程序的神秘感,如下,默认情况下Chrom ...

  6. sql trace script

    CREATE EVENT SESSION [sql_query_tracing] ON SERVER ADD EVENT sqlos.wait_info(    ACTION(sqlos.schedu ...

  7. 手把手教你搭建hadoop+hive测试环境(新手向)

    本文由  网易云发布. 作者:唐雕龙 本篇文章仅限内部分享,如需转载,请联系网易获取授权. 面向新手的hadoop+hive学习环境搭建,加对我走过的坑总结,避免大家踩坑. 对于hive相关docke ...

  8. DS作业01--日期抽象数据类型设计与实现

    第六次作业 1.思维导图及学习体会 1.1 思维导图 1.2 学习体会 因为假期里面代码的练习量很小,所以开学来上学期的知识遗忘了很多,刚刚开始写大作业的时候很困难,完全没有思路,后来看了几位同学的代 ...

  9. 【Oracle 12c】CUUG OCP认证071考试原题解析（29）

    29.choose the best answer Evaluate the following query: SQL> SELECT promo_name || q'{'s start dat ...

  10. eclipse打包jar文件

    论文仿真做线性回归分类在人脸识别中应用与研究,在单机下实现LRC算法后,又在Hadoop云平台下实现了该算法.在比较实验结果时候需要放在相同硬件条件下比较.但是LRC单机算法是在windows下的ec ...